import React from 'react'
import { useNavigate } from 'react-router-dom'
import { Form, Selector, Stepper, Button,  NavBar } from 'react-vant'
import './xzcc.css'
export default function Xzcc() {
  const options = [
    {
      label: '6.21周五18:00',
      value: '1',
    },
    {
      label: '6.22周六18:00',
      value: '2',
    },
    {
      label: '6.23周日18:00',
      value: '3',
    },
  ]
  const options1 = [
    {
      label: 'D级票240元',
      value: '1',
    },
    {
      label: 'C级票360元',
      value: '2',
    },
    {
      label: 'B级票480元',
      value: '3',
    },
    {
      label: 'A级票600元',
      value: '4',
    },
    {
      label: 'VIP票720元',
      value: '5',
    }
  ]
  const options2 = [
    {
      label: '快速配送',
      value: '1',
    },
    {
      label: '现场取票',
      value: '2',
    },
  ]
  const Navigate = useNavigate()
  return (
    <div id='yzp1'>
      {/* 头部导航栏 */}
      <NavBar
        title="舞台剧东野圭吾【虚无的十字架】"
        leftText=""
        onClickLeft={() => Navigate('/')}
      />
      {/* 选择日期 */}
      <Form layout='vertical'>

        <Form.Item name='single' label='日期'>
          <Selector

            options={options}
            defaultValue={['1']}
            onChange={(arr, extend) => console.log(arr, extend.items)}
          />
        </Form.Item>

      </Form>
      {/* 选择票面 */}
      <Form layout='vertical'>
        <Form.Item name='single' label='票面'>
          <Selector
            style={{ padding: '6px' }}
            options={options1}
            defaultValue={['1']}
            onChange={(arr, extend) => console.log(arr, extend.items)}
          />
        </Form.Item>
      </Form>
      {/* 购票数量 */}
      <Form layout='vertical'>
        <Form.Item name='stepper' label='数量' initialValue={1}>
          <Stepper />
        </Form.Item>
      </Form>
      {/* 配送方式 */}
      <Form layout='vertical'>

        <Form.Item name='single' label='日期'>
          <Selector

            options={options2}
            defaultValue={['1']}
            onChange={(arr, extend) => console.log(arr, extend.items)}
          />
        </Form.Item>

      </Form>
      <div className='xzcc1'>
        <span className='s1'>合计：<span>$720</span></span>
        <span className='s2'> <Button style={{ width: '160px' }}
          onClick={() => { Navigate('/app/ddjs') }}
          type='danger'>确定</Button></span>

      </div>
    </div>
  )
}
